<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../js/jquery-1.10.1.min.js"></script>
    <title>Document</title>
</head>

<body>
    <div id="wrap">
        <h2>jQuery初识</h2>
        <div class="list">
            <li class="first">01</li>
            <li>02</li>
            <li>03</li>
            <li>04</li>
            <li>05</li>
            <li>06</li>
        </div>
    </div>
</body>
<script>
    // jQuery  : 原生Javascript 开发出来的代码库，通常被称为框架。

    // 作用：优化HTML文档操作、事件处理、动画设计和Ajax交互。

    // jQuery如何获取元素?
    // 注意：通过jQuery获取元素  =>  jQuery对象(本质：伪数组/类数组)

    // 1：传入一个字符串作为选择器
    console.log($(".list li"));

    // 2.接收一个原生dom元素
    var first = document.getElementsByClassName("first")[0];
    console.log($(first));

    // 3.接收一个原生dom元素的集合
    var liList = document.querySelectorAll(".list li")
    console.log($(liList));

    // 4.接收一个jQuery对象作为参数
    console.log($($("list li")));


    // jQuery 转 原生
    // 注意：原生只能使用原生的方法，jQuery只能使用jQuery的方法，但是可以相互转换

    console.log($(".list li")[1]);  // 下标取值

    // get()  
    // 如果接收一个下标  => 返回对应下标的元素
    // 如果不接收参数    => 将jQuery对象(伪数组) 转化为真数组
    console.log($(".list li").get(0));    //返回对应下标的元素
    console.log($(".list li").get());     //将jQuery对象(伪数组) 转化为真数组


    var list = Array.from($(".list li"));  //伪数组转真数组
    var list = Array.prototype.slice.call($(".list li"));  // 伪数组转真数组
    console.log(list);
</script>

</html>